<template>
  <el-dialog
    class="rectification-sheet-model"
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(900)"
    :before-close="handleCancel">
    <main>
      <div class="history">
        <div class="h-row">
          <label>存在问题：</label>
          <span>11111111111111</span>
        </div>
        <div class="h-row">
          <label>整改部位：</label>
          <span>2222222222</span>
        </div>
        <div class="h-row">
          <label>整改要求：</label>
          <span>333333333333</span>
        </div>
        <div class="pic">
          <label>问题照片：</label>
          <el-image src="../../../a">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </div>
      <div class="form-container">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="rootForm"
          class="rule-form">
          <el-form-item label="整改回复" prop="reply" required>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="ruleForm.reply">
            </el-input>
          </el-form-item>
          <el-form-item label="整改结果" prop="result" required>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="ruleForm.result">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        reply: '',
        result: ''
      },
      // 校验规则
      rules: {
        reply: [
          {
            required: true,
            trigger: 'blur',
            message: '请填写整改回复'
          }
        ],
        result: [
          { required: true, message: '请填写整改结果' },
          { validator: this.resultValidator, trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    // 标题
    title() {
      return '整改单';
    }
  },
  methods: {
    resultValidator(rule, value, callback) {
      callback();
    },
    // 取消
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .rectification-sheet-model {
    main {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      > div {
        width: 49%;
        height: 100%;
        &.history {
          padding: 10px;
          position: relative;
          .h-row {
            width: 100%;
            min-height: 40px;
            display: flex;
            align-items: center;
          }
          .pic {
            .el-image {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 300px;
              height: 300px;
              margin: 10px 0 0 50px;
              .image-slot i {
                font-size: 50px;
              }
            }
          }
          &:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            display: block;
            border-image: linear-gradient(#fff, #fff) 1 1;
            right: 1px;
            top: calc(50% - 150px);
            border-width: 0 0 300px 1px;
            border-style: solid;
          }
        }
        &.form-container {
          /deep/ .el-form-item__content {
            padding: 0 20px;
          }
        }
      }
    }
  }
</style>
